<template>
  <div class="box partner-node-collect">
    <div class="header">
      <div class="title">合作商点位数Top5</div>
      <svg-icon icon-class="more" />
    </div>
    <el-row class="body">
      <el-col :span="17" style="padding-left: 10px; padding-right: 10px;">
        <div class="chart">
          <div id="node-collect" />
        </div>
      </el-col>
      <el-col :span="7" style="padding-left: 10px; padding-right: 10px;">
        <div class="collect">
          <div class="count">16</div>
          <div class="name">点位数</div>
          <div class="count count2">5</div>
          <div class="name">合作商数</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getNodeColllectAPI } from '@/api/workbench'
export default {
  data() {
    return {

    }
  },
  created() {
    this.getNodeColllect()
  },
  methods: {
    async getNodeColllect() {
      const { data } = await getNodeColllectAPI()
      console.log(data)
      const chartPei = document.getElementById('node-collect')
      const mychart = echarts.init(chartPei)
      mychart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.partner-node-collect {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
  .body {
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    align-items: center;
    .chart {
      padding-top: 16px;
      height: 300px;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      position: relative;
      #node-collect {
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
    .collect {
      width: 154px;
      height: 230px;
      padding-top: 47px;
      padding-left: 38px;
      background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      .count {
          height: 33px;
          font-size: 24px;
          font-family: PingFangSC-Semibold,PingFang SC;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
      }
      .count2 {
        margin-top: 20px;
      }
      .name {
        height: 17px;
        margin-top: 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #000412;
        line-height: 17px;
      }
    }
  }
}
</style>
